<!DOCTYPE html>
<html>
<head>
    <title>Stock Prices</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="Content-Style-Type" content="text/css"/>
    <meta http-equiv="Content-Script-Type" content="text/javascript"/>
    <link rel="shortcut icon" href="/images/favicon.ico"/>
    <link rel="stylesheet" type="text/css" href="/css/style.css" media="all"/>
    <script type="text/javascript" src="/js/util.js"></script>
    <style type="text/css">
		/*<![CDATA[*/
		body {
			color: #333333;
			line-height: 150%;
		}

		thead {
			font-weight: bold;
			background-color: #CCCCCC;
		}

		.odd {
			background-color: #FFCCCC;
		}

		.even {
			background-color: #CCCCFF;
		}

		.minus {
			color: #FF0000;
		}

		/*]]>*/

    </style>

</head>

<body>

<h1>Stock Prices</h1>

<table>
    <thead>
    <tr>
        <th>#</th>
        <th>symbol</th>
        <th>name</th>
        <th>price</th>
        <th>change</th>
        <th>ratio</th>
    </tr>
    </thead>
    <tbody>
    {% for item in items %}
    <tr class="{% if (loop.index + 1) is even %}even{% else %}odd{% endif %}">
        <td>{{loop.index + 1}}</td>
        <td>
            <a href="/stocks/{{ item.symbol }}">{{item.symbol}}</a>
        </td>
        <td>
            <a href="{{ item.url }}">{{item.name}}</a>
        </td>
        <td>
            <strong>{{ item.price }}</strong>
        </td>

        {% if item.change < 0.0 %}
        <td class="minus">{{item.change}}</td>
        <td class="minus">{{item.ratio}}</td>
        {% else %}
        <td>{{item.change}}</td>
        <td>{{item.ratio}}</td>
        {% endif %}

    </tr>
    {% endfor %}
    </tbody>
</table>
</body>
</html>
